<template>
  <a-button type="text" @click="toggleFullscreen">
    <template #icon>
      <i class="fa-solid fa-compress" v-if="isFullscreen"></i>
      <i class="fa-solid fa-expand" v-else></i>
    </template>
  </a-button>
</template>
<script setup>
defineOptions({
  name: 'FullScreen',
});
const isFullscreen = ref(false);
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
};

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement;
};

// 加载菜单数据
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange);
});

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
});
</script>
